<template>
  <view class="layout">
    <!-- 对搜索框进行浮动 -->
    <view class="navbar">
      <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px' }"></view>
      <view class="titleBar" :style="{ height: getTitleBarHeight() + 'px' }">
        <view class="box">
          <!-- 中间居中的文字 -->
          <view class="center-content">智能助手</view>
        </view>
      </view>
    </view>
    <!-- 填充区域 -> 为了让固定的搜索框不遮盖内容 -->
    <view class="fill" :style="{ height: getNavBarHeight() + 'px' }"></view>

    <!-- 内容区域 -->
    <view class="content">
      <view class="avatar" @click="goChat">
        <image src="/static/agent/agent.jpg"></image>
      </view>
      <view class="message">
        <text class="animated-text" v-for="(item, index) in displayMessages" :key="index">{{ item }}</text>
      </view>
    </view>

    <!-- 新增卡片区域 -->
    <view class="cards-container">
      <view class="card-scroll-container">
        <view class="card" v-for="(card, index) in displayedCards" :key="index" :style="{ backgroundColor: card.bgColor }">
          <view class="card-header">
            {{ card.headerTitle }}
          </view>
          <view class="card-content">
            <view 
              v-for="(item, itemIndex) in card.items" 
              :key="itemIndex" 
              class="card-item"
              @click="logItemClick(index, itemIndex, item.text)"
              @mouseover="highlightItem(itemIndex)"
              @mouseout="resetItem(itemIndex)"
            >
              <view class="card-item-icon">
                {{ item.icon }}
              </view>
              <view class="card-item-text">
                {{ item.text }}
              </view>
              <view class="card-item-arrow">→</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from '@/utils/system.js';

const avatar = ref("/static/avatar.png");
const displayMessages = ref(['', '', '']);
const originalMessage = '初次见面，我是你的个人AI助手！我可以回答你的各种问题，想找人聊天的话我也随时都在，如果有需要请点击头像。';
const hasAnimated = ref(false);
const isFirstVisit = ref(true);

// 所有卡片数据
const allCards = ref([
  {
    headerTitle: '我是你的生活万事通',
    bgColor: '#e6f7ff',
    items: [
      { icon: '🥗', text: '隔夜菜到底能不能吃' },
      { icon: '🌱', text: '植物除甲醛是智商税吗' },
      { icon: '👂', text: '经常用耳机听力会下降吗' },
    ],
  },
  {
    headerTitle: '我是你的健身指导者',
    bgColor: '#f0f9eb',
    items: [
      { icon: '💪', text: '初学者如何制定健身计划' },
      { icon: '🍎', text: '健身期间的饮食搭配建议' },
      { icon: '🛌', text: '运动后的恢复方法' },
    ],
  },
  {
    headerTitle: '我是你的学习助手',
    bgColor: '#fef0f0',
    items: [
      { icon: '📚', text: '高效学习方法推荐' },
      { icon: '⏱️', text: '如何合理安排学习时间' },
      { icon: '🧠', text: '记忆力提升技巧' },
    ],
  },
  {
    headerTitle: '我是你的美食专家',
    bgColor: '#fff3e0',
    items: [
      { icon: '🍜', text: '如何做出完美的拉面' },
      { icon: '🍞', text: '面包的烘焙技巧' },
      { icon: '🍰', text: '蛋糕制作的秘诀' },
    ],
  },
  {
    headerTitle: '我是你的旅行规划师',
    bgColor: '#e8f5e9',
    items: [
      { icon: '✈️', text: '如何规划一次完美的旅行' },
      { icon: '🏨', text: '选择酒店的技巧' },
      { icon: '🌍', text: '旅行中的安全注意事项' },
    ],
  },
  {
    headerTitle: '我是你的健康顾问',
    bgColor: '#f3e5f5',
    items: [
      { icon: '💊', text: '常见疾病的预防方法' },
      { icon: '🧘', text: '如何缓解压力' },
      { icon: '💤', text: '改善睡眠质量的方法' },
    ],
  },
  {
    headerTitle: '我是你的科技达人',
    bgColor: '#e0f7fa',
    items: [
      { icon: '💻', text: '如何选择合适的电脑' },
      { icon: '📱', text: '手机维修小技巧' },
      { icon: '🌐', text: '网络安全防护知识' },
    ],
  },
  {
    headerTitle: '我是你的时尚顾问',
    bgColor: '#f8bbd0',
    items: [
      { icon: '👗', text: '如何搭配时尚服装' },
      { icon: '👠', text: '选择合适的鞋子' },
      { icon: '💄', text: '化妆技巧分享' },
    ],
  },
  {
    headerTitle: '我是你的理财助手',
    bgColor: '#e0f2f1',
    items: [
      { icon: '💰', text: '如何制定理财计划' },
      { icon: '📈', text: '投资基础知识' },
      { icon: '💸', text: '如何节省开支' },
    ],
  },
]);

// 随机显示3个卡片
const displayedCards = ref([]);

onMounted(() => {
  // 检查是否已经访问过该页面
  checkFirstVisit();
  
  // 如果是第一次访问，显示打字效果
  if (isFirstVisit.value) {
    displayText();
  }
  
  // 随机选择并显示3个卡片
  selectRandomCards();
});

// 检查是否是第一次访问
const checkFirstVisit = () => {
  const visited = uni.getStorageSync('hasVisited');
  isFirstVisit.value = !visited;
  
  // 如果不是第一次访问，直接显示完整消息
  if (!isFirstVisit.value) {
    displayMessages.value = originalMessage.split('。').slice(0, 3);
  }
};

// 文字动态显示逻辑
const displayText = () => {
  hasAnimated.value = true;
  let charIndex = 0;
  const messageLines = originalMessage.split('。');
  messageLines.pop(); // 去掉最后一个空字符串
  let currentLine = 0;
  let currentLineCharIndex = 0;
  const displayNextChar = () => {
    if (currentLine < 3 && charIndex < originalMessage.length) {
      if (originalMessage[charIndex] === '。') {
        displayMessages.value[currentLine] = messageLines[currentLine].substring(0, currentLineCharIndex + 1);
        currentLine++;
        currentLineCharIndex = 0;
      } else {
        displayMessages.value[currentLine] = messageLines[currentLine].substring(0, currentLineCharIndex + 1);
        currentLineCharIndex++;
      }
      charIndex++;
      setTimeout(displayNextChar, 100); // 控制文字显示速度
    } else {
      // 动画结束后，标记为已访问
      uni.setStorageSync('hasVisited', true);
    }
  };
  displayNextChar();
};

// 随机选择并显示3个卡片
const selectRandomCards = () => {
  const randomIndexes = new Set();
  while (randomIndexes.size < 3) {
    const randomIndex = Math.floor(Math.random() * allCards.value.length);
    randomIndexes.add(randomIndex);
  }
  displayedCards.value = Array.from(randomIndexes).map(index => allCards.value[index]);
};

// 点击事件处理函数
const logItemClick = (cardIndex, itemIndex, itemText) => {
  uni.navigateTo({
    url: "/pages/chat/agent?content=" + encodeURIComponent(itemText)
  });
};

// 聊天界面
const goChat = () => {
  uni.navigateTo({
    url: "/pages/chat/agent"
  });
};

// 高亮显示元素
const highlightedItem = ref(null);
const highlightItem = (itemIndex) => {
  highlightedItem.value = itemIndex;
};
const resetItem = () => {
  highlightedItem.value = null;
};
</script>

<style lang="scss" scoped>
.layout {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; /* 提高z-index值 */
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    .titleBar {
      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        max-height: 60px;
        padding: 0 15px;
      }
    }
  }

  .content {
    margin-top: 100px; /* 动态设置顶部间距 */
    padding: 0 15px;
    .avatar {
      width: 60px;
      height: 60px;
      margin: 0 auto 10px;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .message {
      text-align: center;
      line-height: 1.5;
      .animated-text {
        font-size: 18px;
        color: #333333;
        margin: 5px 0;
        word-break: keep-all;
      }
    }
  }

  .left-content {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }

  .image {
    width: 30px;
    height: 30px;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .center-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 60px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  .cards-container {
    padding: 10px 15px;
  }

  .card-scroll-container {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 5px 0;

    &::-webkit-scrollbar {
      display: none;
    }

    .card {
      min-width: 250px;
      max-width: 300px;
      margin-right: 15px;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
      }

      .card-header {
        font-size: 16px;
        margin-bottom: 15px;
        font-weight: bold;
        background: linear-gradient(to right, #4f46e5, #8b5cf6, #ec4899);
        -webkit-background-clip: text;
        color: transparent;
        text-align: center;
      }

      .card-content {
        width: 100%;
      }

      .card-item {
        display: flex;
        align-items: center;
        margin: 8px 0;
        padding: 8px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease, background-color 0.2s ease;
        cursor: pointer;

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          transform: translateX(5px);
          background-color: rgba(0, 0, 0, 0.03);
        }

        &.highlighted {
          background-color: rgba(0, 0, 0, 0.08);
          transform: translateX(5px);
        }

        .card-item-icon {
          margin-right: 10px;
          font-size: 18px;
          transition: transform 0.2s ease;

          &:hover {
            transform: scale(1.2);
          }
        }

        .card-item-text {
          flex: 1;
          font-size: 14px;
          color: #333;
          transition: color 0.2s ease;
        }

        .card-item-arrow {
          color: #999;
          transition: transform 0.2s ease;

          &:hover {
            transform: translateX(3px);
          }
        }
      }
    }
  }
}
</style>